<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="margin-right:30px;">

      <el-form-item label="姓名：" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择" clearable>
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学号：" prop="id">
        <el-input v-model="form.id" placeholder="请输入学号"></el-input>
      </el-form-item>

      <el-form-item label="学院：" prop="college">

      </el-form-item>
      <el-form-item label="专业：" prop="major">

      </el-form-item>
      <el-form-item label="班级：" prop="cls">

      </el-form-item>

    </el-form>
  </Layer>
</template>

<script lang="ts" setup>
import {  ref, onMounted, defineEmits, defineProps } from 'vue'
import Layer from '@/components/layer/index.vue'
import { addStudentAccountApi } from '@/api/accountManagement';
import { ElMessage } from "element-plus";
import type { ElFormItemContext } from 'element-plus/lib/el-form/src/token'
import type { Ref } from 'vue'
import type { LayerType } from '@/components/layer/index.vue'
import {
  updateStudentAccountsApi
} from "@/api/accountManagement";

onMounted(() => {
  init()
});
const emit = defineEmits(['getTableData']);
const props = defineProps({
  layer: {
    type: Object,
    default: () => {
      return {
        show: false,
        title: '',
        showButton: true
      }
    }
  }
});

const ruleForm: Ref<ElFormItemContext | null> = ref(null);
const layerDom: Ref<LayerType | null> = ref(null);

const form = ref({
  name: null,
  gender: null,
  id: null,
  college: null,
  major: null,
  cls: null
});
const rules = {
  name: [{ required: false, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: false, message: '选择性别', trigger: 'blur' }],
  id: [{ required: true, message: '请输入学号', trigger: 'blur' }],
  college: [{ required: false, message: '请选择学院', trigger: 'blur' }],
  major: [{ required: false, message: '请选择专业', trigger: 'blur' }],
  cls: [{ required: false, message: '请选择', trigger: 'blur' }]
};

const init=()=> { // 用于判断新增还是编辑功能
  if (props.layer.row) {
    form.value = JSON.parse(JSON.stringify(props.layer.row)) // 数量量少的直接使用这个转
  } else {

  }
}

const submit = () => {
  if (ruleForm) {
    ruleForm.validate((valid: any) => {
      if (valid) {
        let params = form
        if (props.layer.row) {
          updateForm(params)
        } else {
          addForm(params)
        }
      } else {
        return false;
      }
    });
  }
}
// 新增提交事件
const addForm = (params: object) => {
  addStudentAccountApi(params).then((res: any) => {
    props.layer.show = false
    if (res.code === 200) {

      emit('getTableData', true)
      ElMessage.success('添加成功')
    } else {
      ElMessage.error(res.msg)
    }
  }).catch(error => {
    ElMessage.error(error)

  })
}
// 编辑提交事件
const updateForm = (params: object) => {
  updateStudentAccountsApi([params])
    .then((res: any) => {
      if (res.code === 200) {
        ElMessage.success({ message: "修改成功", duration: 3000 })
        emit('getTableData', false)
        props.layer.show = false
      } else {
        ElMessage.error({ message: "修改信息出错", duration: 3000 })
      }
    })
}


</script>

<style lang="scss" scoped></style>